import { Options as GraphOptions } from '@antv/x6';

export const GraphConfig: Partial<GraphOptions.Manual>  = {
  background: {
    color: '#F2F7FA',
  },
  grid: {
    visible: true,
    type: 'doubleMesh',
    args: [
      {
        color: '#eee', // 主网格线颜色
        thickness: 1, // 主网格线宽度
      },
      {
        color: '#ddd', // 次网格线颜色
        thickness: 1, // 次网格线宽度
        factor: 4, // 主次网格线间隔
      },
    ],
  },
  connecting: {
    router: {
      name: 'manhattan', // 或 'orth'
      args: {
        // 可选参数
        padding: 10,
      },
    },
  },
  autoResize: true,
  panning: true,
  mousewheel: true,
  interacting: (cellView) => {
    const cell = cellView.cell
    if (cell.isNode() && cell.getParent()) {
      return { 
        nodeMovable: false // 如果是子节点，禁止拖动
      }
    }
    return true
  },
};

export const VueNodePorts =  {
  groups: {
    top: {
      position: 'top',
      attrs: {
        circle: {
          r: 6,
          magnet: true,
          stroke: '#31d0c6',
          strokeWidth: 2,
          fill: '#fff',
        },
      },
    },
    left: {
      position: 'left',
      attrs: {
        circle: {
          r: 6,
          magnet: true,
          stroke: '#31d0c6',
          strokeWidth: 2,
          fill: '#fff',
        },
      },
    },
    right: {
      position: 'right',
      attrs: {
        circle: {
          r: 6,
          magnet: true,
          stroke: '#31d0c6',
          strokeWidth: 2,
          fill: '#fff',
        },
      },
    },
    bottom: {
      position: 'bottom',
      attrs: {
        circle: {
          r: 6,
          magnet: true,
          stroke: '#31d0c6',
          strokeWidth: 2,
          fill: '#fff',
        },
      },
    },
  },
  items: [
    { id: 'top', group: 'top' },
    { id: 'left', group: 'left' },
    { id: 'right', group: 'right' },
    { id: 'bottom', group: 'bottom' },
  ],
}
